<template>
  <view>
    <z-paging
      ref="paging"
      v-model="staffList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
    >
      <view slot="top">
        <u-navbar title="店员管理" title-size="36" height="50">
          <view class="slot-wrap" @click="toPersonal">
            <text>个人中心</text>
          </view>
        </u-navbar>
        <!-- <view class="search-bar">
          <u-search
            v-model="searchKeyword"
            placeholder="请输入手机号"
            @search="searchStaff"
            @custom="searchStaff"
            :show-action="true"
            action-text="搜索"
          >
          </u-search>
        </view> -->
      </view>
      <view class="staff-list">
        <view v-for="staff in staffList" :key="staff.id" class="staff-item">
          <view class="staff-info">
            <text class="staff-name">
              {{ staff.contactName }}
            </text>
            <text class="staff-mobile">{{ staff.contactMobile }}</text>
            <view class="staff-role">
              <u-tag
                v-for="role in parseRoles(staff.roles)"
                :key="role.value"
                :text="role.label"
                type="primary"
                size="mini"
                plain
              ></u-tag>
            </view>
          </view>
          <view class="dis-flex flex-column flex-x-end">
            <text
              v-show="staff.roleNames && staff.roleNames.indexOf('配送员') >= 0"
              style="font-size: 26rpx; font-weight: normal; margin-bottom: 40rpx"
              :style="
                staff.status === 0
                  ? 'color:green'
                  : staff.status === 1
                    ? 'color:darkgray'
                    : 'color:orange'
              "
              >{{ staff.statusName }}</text
            >
            <view class="staff-actions">
              <u-button type="primary" size="mini" plain @click="editStaff(staff)"> 编辑 </u-button>
              <u-button type="error" size="mini" plain @click="deleteStaff(staff)"> 删除 </u-button>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <button class="add-button" @click="addStaff"> 添加员工 </button>
  </view>
</template>

<script>
import { ROLE_OPTIONS } from '@/store/staff-roles'

export default {
  data() {
    return {
      roleOptions: ROLE_OPTIONS,
      searchKeyword: '',
      staffList: [],
      loading: false
    }
  },

  onShow() {
    // 获取员工列表
    this.queryList(1)
  },
  methods: {
    // z-paging 查询回调
    queryList(pageNo = 1, pageSize = 10) {
      this.loading = true
      // 调用实际的API接口（同步方式）
      this.$u
        .get('/app-api/shop/staff/page', {
          pageNo: pageNo,
          pageSize: pageSize,
          contactMobile: this.searchKeyword
        })
        .then((res) => {
          this.loading = false
          // 将数据传给z-paging处理
          this.$refs.paging.complete(res.data.list)
        })
        .catch((error) => {
          this.loading = false
          console.error('加载员工列表失败:', error)
          // 告诉z-paging加载失败
          this.$refs.paging.complete(false)
        })
    },

    // 搜索员工
    searchStaff() {
      // 触发z-paging重新加载数据
      this.$refs.paging.reload()
    },

    // 添加员工
    addStaff() {
      uni.navigateTo({
        url: '/store/staff-form?type=add'
      })
    },

    // 编辑员工
    editStaff(staff) {
      uni.navigateTo({
        url: `/store/staff-form?type=edit&id=${staff.id}`
      })
    },

    // 删除员工
    deleteStaff(staff) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除员工 ${staff.contactName} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.performDelete(staff.id)
          }
        }
      })
    },

    // 执行删除操作
    async performDelete(id) {
      uni.showLoading()
      try {
        // 调用删除API
        const res = this.$u.get('/app-api/shop/staff/delete', {
          id: id
        })
        this.$refs.paging.reload()
      } catch (error) {
        this.$u.toast('删除出错')
      } finally {
        uni.hideLoading()
      }
    },

    // 解析角色
    parseRoles(roles) {
      if (!roles) return []
      return this.roleOptions.filter((option) => roles.includes(option.value))
    },

    // 跳转到个人中心
    toPersonal() {
      uni.reLaunch({
        url: '/pages/ucenter/ucenter'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  padding: 0 20rpx;
}

.staff-list {
  margin-top: 20rpx;
  padding: 0 20rpx 120rpx;
}

.staff-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.staff-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.staff-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.staff-mobile {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.staff-role {
  display: flex;
  gap: 10rpx;
}

.staff-actions {
  display: flex;
  gap: 10rpx;
}

.staff-actions ::v-deep .u-btn--primary--plain {
  color: #10a28f !important;
}

.add-button {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 72rpx;
  line-height: 72rpx;
  background: #10a28f;
  border-radius: 36rpx;
  font-size: 30rpx;
  color: #ffffff;
  text-align: center;
}
</style>
